<template>
    <fieldset>
        <legend>产品</legend>
        <ul>
            <li v-for="item in data" :key="item.id">
               
                    产品名称：{{item.title}}
                ---------
                    产品价格：{{item.price}}
                ---------
                    库存：{{item.inventory}}
              
                &nbsp;&nbsp;        
                <button @click="addClick(item)" :disabled="item.inventory===0">加入</button>
            </li>
        </ul>
    </fieldset>
   
</template>
<script setup>



import {useProduct} from "../../store/product";
import { useCart } from "../../store/cart";
import  {storeToRefs} from "pinia";

let userStore =useProduct()
let useCarts=useCart()

let {data} =storeToRefs(userStore)
let {addList}=storeToRefs(useCarts)

// 调用方法
userStore.fetch_data()

let addClick=function(current){ 
    
    useCarts.$patch((state)=>{
        
        let target =state.addList.find(a=>a.id===current.id)
        
        if(!target){
            let obj={
                title:current.title,
                price:current.price,
                count:1,
                id:current.id
            }
            state.addList.push(obj)
        }else{
            target.count++
        }
        userStore.delClick(current)

    })
      




}

</script>